import React from 'react';
import {StyleSheet, View,} from 'react-native';
import TouchButton from "../widget/btn/HighlightButton";
import PageImage from "./PageImage";
import PageImageSource from "./PageImageSource";
import ImagePicker from 'react-native-image-crop-picker';

/** ImageItem 选择图片 */
export default class PageImageItem extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={{height: 15}}/>
                <TouchButton disabled={false} title={'图片样式'}        onPress={() => this.props.navigation.navigate('PageImage')}/>

                <View style={{height: 15}}/>
                <TouchButton disabled={false} title={'图片加载来源'}    onPress={() => this.props.navigation.navigate('PageImageSource')}/>

                <View style={{height: 15}}/>
                <TouchButton disabled={false} title={'拍摄图片(包含裁剪)'}  onPress={() => this._shoot()}/>

                <View style={{height: 15}}/>
                <TouchButton disabled={false} title={'选择一张图片'}        onPress={() => this._selectOne()}/>

                <View style={{height: 15}}/>
                <TouchButton disabled={false} title={'选择多张图片(长按)'}   onPress={() => this._selectMulti()}/>
            </View>
        );
    }

    /** 拍摄 */
    _shoot():void{
        ImagePicker.openCamera({
            width: 300,
            height: 400,
            cropping: true
        }).then(image => {
            console.log(image);
        });
    };

    /** 裁剪 */
    _cropOnly(){
        ImagePicker.openCropper({
            path: 'my-file-path.jpg',
            width: 300,
            height: 400
        }).then(image => {
            console.log(image);
        });
    }

    /** 选择1张 */
    _selectOne():void{
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: false,
        }).then(image => {
            console.log(image);
        });
    };

    /** 选择N张 */
    _selectMulti():void{
        ImagePicker.openPicker({
            multiple: true
        }).then(images => {
            console.log(images);
        });
    };
}

//样式定义
const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        alignItems: 'center',
        // justifyContent: 'center',
    },
});


